<template>
    <div class="map-layer">
        <!-- 图层图标 -->
        <img src="@/assets/images/map-layer/layer.svg" class="layer-icon" @click.stop="toggle" />

        <!-- 图层弹出层 -->
        <el-card v-if="isShowLayer" class="layer-card">
            <div class="box">
                <div class="head">标准图层</div>
                <div class="item pointer" v-for="(item, index) in standardLayerList" :key="index"
                    @click="changeStandardLayer(item, index)">
                    <img src="@/assets/images/map-layer/selected.svg" class="radio" v-if="activeStandardIndex == index">
                    <img src="@/assets/images/map-layer/normal.svg" class="radio" v-else>
                    <div class="label text-overflow" :class="activeStandardIndex == index ? 'act' : 'def'">流出-省内</div>
                </div>
            </div>
            <div class="box">
                <div class="head">自定义图层</div>
                <div class="item pointer" v-for="(item, index) in customLayerList" :key="index"
                    @click="changeCustomLayer(item, index)">
                    <img src="@/assets/images/map-layer/selected.svg" class="radio" v-if="activeCustomIndex == index">
                    <img src="@/assets/images/map-layer/normal.svg" class="radio" v-else>
                    <div class="label text-overflow" :class="activeCustomIndex == index ? 'act' : 'def'">{{ item.label
                        }}</div>
                    <div>
                        <img src="@/assets/images/map-layer/edit.svg" class="ope-icon pointer">
                        <img src="@/assets/images/map-layer/delete.svg" class="ope-icon pointer">
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 是否显示图层
const isShowLayer = ref(true)

// 标准图层数据
const standardLayerList = ref([
    { id: 1, label: "流入-省内", hookName: "" },
    { id: 2, label: "流入-省外", hookName: "" },
    { id: 3, label: "流出-省内", hookName: "" },
])

// 自定义图层数据
const customLayerList = ref([
    { id: 1, label: "自定义图层1", hookName: "" },
    { id: 2, label: "自定义图层2", hookName: "" },
    { id: 3, label: "自定义图层3", hookName: "" },
])

// 默认选中标准图层索引
const activeStandardIndex = ref(0)

// 默认选中自定义图层索引
const activeCustomIndex = ref(-1)

// 切换显示地图图层
const toggle = () => {
    isShowLayer.value = !isShowLayer.value
}

// 切换标准图层
const changeStandardLayer = (item, index) => {
    activeStandardIndex.value = index
    if (index >= 0) {
        activeCustomIndex.value = -1
    }
}

// 切换自定义图层
const changeCustomLayer = (item, index) => {
    activeCustomIndex.value = index
    if (index >= 0) {
        activeStandardIndex.value = -1
    }
}
</script>

<style scoped lang="scss">
.map-layer {
    position: relative;
    display: inline-block;

    .layer-icon {
        width: vw(42);
        cursor: pointer;
    }

    .layer-card {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
        height: vh(260);
        overflow-y: auto;
        border-radius: vw(7);

        .box {
            max-width: vw(170);
            overflow-x: hidden;
            margin-bottom: vh(35);

            .head {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(14);
                color: #FFFFFF;
                height: vh(40);
                text-align: center;
                border-bottom: 1px solid rgba(3, 196, 200, 0.32);
                margin-bottom: vh(15);
            }

            .item {
                margin-bottom: vh(10);
                display: flex;
                align-items: center;

                .radio {
                    width: vw(16);
                }

                .label {
                    flex: 1;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: vw(13);
                    margin: 0 vw(8);
                }

                .ope-icon {
                    margin-left: vw(5);
                }

                .def {
                    color: rgba(255, 255, 255, 0.6);
                }

                .act {
                    color: #FFFFFF;
                }
            }
        }
    }
}
</style>
